<template>
    <div>
        <el-form label-width="200"
                 ref="searchForm" :model="searchForm">
            <el-row>
                <el-col span="6">
                    <el-form-item prop="queryCondition.applierSimilar">
                        <el-input v-model.trim="searchForm.queryCondition.applierSimilar">
                            <template slot="prepend"><span>申请人名字</span></template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col span="6">
                    <el-form-item prop="queryCondition.leaveId">
                        <el-input v-model="searchForm.queryCondition.leaveId">
                            <template slot="prepend"><span>请假单流水号</span></template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col span="6">

                    <el-form-item prop="queryCondition.applyTimeStart" label="从">
                        <el-date-picker v-model="searchForm.queryCondition.applyTimeStart">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col span="6">
                    <el-form-item prop="queryCondition.applyTimeEnd" label="到">
                        <el-date-picker v-model.trim="searchForm.queryCondition.applyTimeEnd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="12">
                    <el-form-item prop="queryCondition.leaveTypes" label="请假类型">
                        <el-checkbox-group v-model="searchForm.queryCondition.leaveTypes">
                            <el-checkbox v-for="(e,i) in leaveTypes"
                                         :key="i" :label="e.value" border="">{{e.text}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
                <el-col span="12">
                    <el-form-item prop="queryCondition.auditStates" label="审核状态">
                        <el-checkbox-group v-model="searchForm.queryCondition.auditStates">
                            <el-checkbox v-for="(e,i) in auditStates"
                                         :key="i" :label="e.value" border="">{{e.text}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-form-item>
                <el-button type="primary" icon="el-icon-edit"
                           @click="queryByConditionButton">查询
                </el-button>
                <el-button type="warning" icon="el-icon-remove"
                           @click="()=>$refs['searchForm'].resetFields()">重置
                </el-button>
            </el-form-item>
        </el-form>
        <el-table :data="results" :stripe="true">
            <el-table-column prop="leaveId" label="流水号"></el-table-column>
            <el-table-column prop="applier" label="申请人"></el-table-column>
            <el-table-column label="申请状态">
                 <span slot-scope="props">
                 {{ applyStates .filter(x=>x.value===props.row. applyState )[0].text}}
                 </span>
            </el-table-column>
            <el-table-column label="审核状态">
                 <span slot-scope="props">
                 {{ auditStates .filter(x=>x.value===props.row. auditState )[0].text}}
                 </span>
            </el-table-column>
            <el-table-column label="请假类型">
                 <span slot-scope="props">
                 {{ leaveTypes .filter(x=>x.value===props.row. leaveType )[0].text}}
                 </span>
            </el-table-column>
            <el-table-column prop="applyTime" width="200" label="申请时间">

            </el-table-column>
            <!--            <el-table-column  label="申请状态">
                                      <span slot-scope="props">
                                          {{ applyStates .filter(x=>x.value===props.row. applyState )[0].text}}
                                      </span>
                                  </el-table-column> -->
            <!-- <el-table-column prop="male" label="性别" :formatter="(row,col,cell)$">
            </el-table-column> -->
            <el-table-column label="操作" width="200" fixed="left">
                <template slot-scope="props">
                    <el-button-group>
                        <el-button type="primary" icon="el-icon-edit"
                                   @click="open(props.row.leaveId)">审核
                        </el-button>
                        <el-button type="warning" icon="el-icon-delete">删除
                        </el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <div class="el-pagination">
            <el-pagination layout="total, prev, pager, next, jumper"
                           :total="total" :current-page="searchForm.pageNum"
                           :page-size="searchForm.pageSize"
                           @current-change="queryByCondition">
            </el-pagination>
        </div>
        <el-dialog title="修改请假条" :visible.sync="auditDialogVisible">
            <el-form ref="newSellerFrom" :model="auditLeave" :rules="rules">
                <el-form-item>
                    <span>申请人： {{auditLeave.applier}}</span>
                </el-form-item>
                <el-form-item label="请假原因" prop="auditLeave.reason">
                    <span v-text="auditLeave.reason"></span>
                </el-form-item>
                <el-form-item label="请假类型" prop="auditLeave.leaveType">
                    <el-radio-group v-model="auditLeave.leaveType" disabled="true">
                        <el-radio-button v-for="(e,i) in leaveTypes" :key="i" :label="e.value">{{e.text}}
                        </el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="开始日期">
                    <span v-text="auditLeave.startTime"></span>
                </el-form-item>
                <el-form-item label="结束日期">
                    <span v-text="auditLeave.endTime"></span>
                </el-form-item>
                <el-form-item label="申请日期">
                    <span v-text="auditLeave.applyTime"></span>
                </el-form-item>
                <el-form-item label="审核意见">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容"
                              v-model="auditLeave.auditorWord">

                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!--                    <el-button type="primary" @click="reset">重 置</el-button>-->
                <el-button type="primary" @click="allow">批准请假</el-button>
                <el-button type="danger" @click="notAllow">否决请假</el-button>
                <el-button type="warning" @click="auditDialogVisible = false">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    // import New from './components/New.vue';
    import {mapState} from 'vuex'

    export default {

        name: "AuditLeave",
        components: {
            // New,Old,
        },
        props: {
            sampleP: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
                sampleD: 'value',
                results: [
                    {
                        leaveId: 99,
                        endTime: "2021-06-08T11:52:06",
                        startTime: "2021-06-08T11:52:06",
                        leaveType: "annualLeave",
                        applyState: "saved",
                        auditState: "notAudit",
                        applyTime: "2021-06-08T11:52:06",
                    }
                ],
                total: 0,
                auditLeave: {
                    leaveType: "annualLeave",
                    startTime: "2021-06-09T11:52:06",
                    endTime: "2021-06-10T11:52:06",
                    reason: "看球赛",

                    applyState: "saved",
                    applyTime: "2021-06-08T11:52:06",
                    auditState: "notAudit",
                    leaveId: 0,
                    applier: "libai06",
                    auditorWord: "",
                    auditor: ""
                },
                searchForm: {
                    queryCondition: {
                        applierSimilar: "",
                        leaveId: 0,
                        applyTimeEnd: null,
                        applyTimeStart: null,
                        auditStates: ["notAudit"],
                        leaveTypes: []
                    },
                    pageNum: 1,
                    pageSize: 6
                },
                auditDialogVisible: false,

            }
        },
        computed: {
            // sampleC() {
            //     return this.sampleD+'--';
            // }
            ...mapState(['leaveTypes', 'applyStates', 'auditStates'])
        },
        created() {
        },
        mounted() {
            this.queryByCondition()
        },
        methods: {
            sampleM() {

            },
            queryByCondition(pageNum) {
                if (pageNum) this.searchForm.pageNum = pageNum;
                this.$http({
                    method: 'post',
                    url: '/leaveAbout/leave/query/audit',
                    data: this.searchForm,
                }).then(res => {
                    this.total = res.data.total;
                    this.results = res.data.results;
                }).catch(res => {
                    this.$message.warning(JSON.stringify(res.data))
                });

            },
            queryByConditionButton() {
                this.searchForm.pageNum = 1;
                this.queryByCondition();
            },
            open(id) {

                this.$http({
                    method: 'get',
                    url: '/leaveAbout/leave/audit/' + id,
                }).then(res => {

                    this.auditLeave = res.data;
                    this.$nextTick(()=>{

                        this.auditDialogVisible = true;
                    })
                    //this.total = res.data.total;
                    //this.newsResults = res.data.results;
                }).catch(res => {
                    this.$message.warning(JSON.stringify(res.data))
                });

            },
            allow() {
                this.$http({
                    method: 'put',
                    url: '/leaveAbout/leave/audit/succeed',
                    data: this.auditLeave,
                }).then(res => {
                    if (res.data) {
                        this.auditDialogVisible = false;
                        this.queryByCondition()
                    }
                    //this.total = res.data.total;
                    //this.newsResults = res.data.results;
                }).catch(res => {
                    this.$message.warning(JSON.stringify(res.data))
                });
            },
            notAllow() {
                this.$http({
                    method: 'put',
                    url: '/leaveAbout/leave/audit/failed',
                    data: this.auditLeave,
                }).then(res => {
                    if (res.data) {
                        this.auditDialogVisible = false;
                        this.queryByCondition()
                    }
                    //this.total = res.data.total;
                    //this.newsResults = res.data.results;
                }).catch(res => {
                    this.$message.warning(JSON.stringify(res.data))
                });
            }

        },
        watch: {
            // sampleC(newValue, oldValue) {
            //
            // }
        },
    }
</script>

<style scoped>
    /*<style lang='scss' scoped>*/

</style>